<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<view class="store-inspection-container">
			<view class="grade-box">
				<view class="grade-top flexWrap">
					<view class="title">门店美团/抖音评分</view>
					<view class="time">更新时间：{{scoreInfo.updateTime||'--'}}</view>
				</view>
				<view class="flexWrap" style="gap: 14rpx;">
					<view class="grade-item">
						<view class="item-top flexWrap">
							<text class="name">美团评分</text>
							<!-- <view class="look">查看评价<uni-icons type="right" size="13" color=" rgba(255, 255, 255, 0.6)"></uni-icons></view> -->
						</view>
						<view class="score">{{scoreInfo.meituanScore||0.0}}</view>
						<view class="info">较昨日
							<text :class="{'up':Number(scoreInfo.meituanCompare)>0,'down':Number(scoreInfo.meituanCompare<0)}">
								<text v-if="Number(scoreInfo.meituanCompare>0)">+</text>
								{{scoreInfo.meituanCompare||'--'}}
							</text>
						</view>
						<view class="info">超越<text class="highlight">{{scoreInfo.meituanBeyond||'--'}}%</text>店铺</view>
					</view>
					<view class="grade-item">
						<view class="item-top flexWrap">
							<text class="name">抖音评分</text>
							<!-- <view class="look">查看评价<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.6)"></uni-icons></view> -->
						</view>
						<view class="score">{{scoreInfo.douyinScore||0.0}}</view>
						<view class="info">较昨日
							<text :class="{'up':Number(scoreInfo.douyinCompare)>0,'down':Number(scoreInfo.douyinCompare<0)}">
								<text v-if="Number(scoreInfo.douyinCompare>0)">+</text>
								{{scoreInfo.douyinCompare||'--'}}
							</text>
						</view>
						<view class="info">超越<text class="highlight">{{scoreInfo.douyinBeyond||'--'}}%</text>店铺</view>
					</view>
				</view>
			</view>
			
			<view class="warning-box" >
				<view class="warn-top flexWrap">
					<view class="title">设备状态提醒<text>{{plantWarnList.length}}</text>个</view>
					<view class="btn" @tap="goPage('/shop-inspection/deviceSetup')">{{plantWarnList.length>0?'设备设置':'初始设置'}}</view>
				</view>
				<block v-if="plantWarnList.length==0">
					<view class="tips">尚未设置设备初始值，请及时巡店根据实际情况设置，设置后将开启自动检测</view>
				</block>
				<block v-else>
					<view class="table-item" v-for="(item,index) in plantWarnList" :key="index">
						<view class="table">{{item.equipmentName}}</view>
						<view class="warn-item" v-for="(child,childIndex) in item.partsVOList" :key="childIndex">
							<view class="object">
								{{child.partsName}}
								<text :class="{'soon-expire':child.status==1,'has-expired':child.status==2}">
									{{child.status==1?'即将耗尽':'已耗尽'}}
								</text>
							</view>
							<view class="use-time">{{child.content}}</view>
						</view>
					</view>
				</block>
			</view>
			
			<view class="star-level-box flexWrapNo">
				<text class="label">门店星级</text>
				<view class="star-num flexWrapNo">
					<uni-rate allow-half :size="16" :readonly="true" :value="starsScore" active-color="#FF8E00" />
					<text>{{starsScore}}</text>
				</view>
			</view>
			
			<view class="patrolReport-box">
				<view class="report-top flexWrap">
					<view class="title">最新巡店报告</view>
					<view class="look" @tap="goPage('/shop-inspection/inspectionRecordList')"  v-if="report!=null">
						更多<uni-icons type="right" size="13" color=" rgba(255, 255, 255, 0.6)"></uni-icons>
					</view>
				</view>
				<block v-if="report!=null">
					<view class="inspection-info">巡店时间：{{report.patrolStart||''}}~{{report.patrolEnd||''}}</view>
					<view class="inspection-info">巡店人：{{username}}</view>
					<view class="grade">{{report.starsScore}}（{{patrolScore}}分）</view>
					<view class="inspection-summarize">
						<view class="title">巡店总结：</view>
						<view class="desc">{{report.summary||'加载中...'}}</view>
					</view>
				</block>
				<view class="empty-box" v-else>
					<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
				</view>
			</view>
			<view class="classify-box" v-if="unqualifiedList.length!=0">
				<view class="classify-title">不合格<text class="disqualification">{{unqualifiedNum}}</text>项</view>
				<view class="inspect-box">
					<view class="inspect-item" v-for="(item,index) in unqualifiedList" :key="index">
						<view class="content">{{index+1}}（{{item.originalScore}}分）：{{item.project}}</view>
						<view class="status flexWrap">
							<text>整改记录</text>
							<view class="disqualification" @tap="goPage(`/shop-inspection/rectifyRecord?id=${item.id}&series=${index+1}`)"
								v-if="item.status==1">
								待整改<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
							<view class="orange" @tap="goPage(`/shop-inspection/rectifyRecord?id=${item.id}&series=${index+1}`)"
								v-if="item.status==2">
								待审核<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
							<view class="qualification" @tap="goPage(`/shop-inspection/rectifyRecord?id=${item.id}&series=${index+1}`)"
								v-if="item.status==3">
								已整改<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="classify-box" v-if="qualifiedList.length!=0">
				<view class="classify-title">合格<text class="qualification">{{qualifiedList.length}}</text>项</view>
				<view class="inspect-box">
					<view class="inspect-item" v-for="(item,k) in qualifiedList" :key="k">
						<view class="content">{{unqualifiedList.length+k+1}}（{{item.originalScore}}分）：{{item.project}}</view>
						<view class="status flexWrap" v-if="item.recordType==3">
							<text>优化建议</text>
							<view class="other" @tap="goPage(`/shop-inspection/optimizeSuggestion?id=${item.id}&series=${unqualifiedList.length+k+1}`)">
								查看<uni-icons type="right" size="13" color="rgba(255, 255, 255, 0.5)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-box flexWrapNo">
			<view class="define-btn" @tap="goInspection">立即巡店</view>
		</view>
			
		<!--弹窗 -->
		<uni-popup ref="popup" type="center" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.7)">
			<view class="popup-content">
				<uni-icons type="closeempty" size="22" color="#fff" class="close-icon" @tap="closePopup"></uni-icons>
				<view class="title">历史草稿</view>
				<view class="content">是否继续{{draftTime}}的巡店记录？</view>
				<view class="btn-box">
					<view class="restart-btn" @tap="handleAbandon">不了，重新开始</view>
					<view class="continue-btn" @tap="handleContinue">继续</view>
				</view>
			</view>
		</uni-popup>	
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageOpc:0,
				draftText:'',
				draftTime:'',
				plantWarnList: [],
				partsid: "",
				equipmentName: "",
				partsName: "",
				partsStatus: 1,
				categoryId: 0,
				report: null,
				patrolScore: 0, //巡检评分
				starsScore: 0, //星级
				username: '', //巡店人
				unqualifiedList: [], //不合格
				qualifiedList: [], //合格
				scoreInfo:{},
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onShow() {
			this.getNewestReport();
			this.getPlantWarn();
			this.getStoreScore();
		},
		
		computed:{
			unqualifiedNum(){
				return this.unqualifiedList.filter(item => item.status!=3).length
			}
		},
		
		methods:{
			// 最新报告
			getNewestReport() {
				this.$request.get(this.$api.getNewestReport, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						if(data!=null){
							[this.unqualifiedList, this.qualifiedList] = this.partitionArray(data.reportProjectList, item => item.status)
							this.report = data.report
							this.patrolScore = data.patrolScore
							this.starsScore = data.starsScore
							this.username = data.username
						}
					}
				})
			},
			// 筛选数据
			partitionArray(arr, predicate) {
				return arr.reduce((acc, val) => {
					const partition = predicate(val) ? 0 : 1;
					acc[partition].push(val);
					return acc;
				}, [[],[]]);
			},
			// 设备配件预警
			getPlantWarn() {
				this.$request.post(this.$api.plantWarn, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.plantWarnList = data
					}
				})
			},
			// 美团抖音评分数据
			getStoreScore(){
				this.$request.post(this.$api.getStoreScore, {
					storeId: uni.getStorageSync('store_id')
				}, {
					isJava: true
				}).then(res => {
					if (res.code == 200) {
						let {
							data = {}
						} = res;
						this.scoreInfo=data
					}
				})
			},
			// 关闭弹窗
			closePopup(){
				this.$refs.popup.close()
			},
			// 巡店
			goInspection(){
				this.getDraft()
			},
			// 获取草稿
			getDraft(){
				this.$request.get(this.$api.getDraft, {
					storeId:uni.getStorageSync('store_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.draftTime=data?data.createTime:''
						this.draftText=data?data.text:''

						if(this.draftText){
							this.$refs.popup.open()
						}else{
							uni.navigateTo({
								url:'/shop-inspection/sign',
							})
						}
					}
				})
			},
			
			// 放弃草稿
			handleAbandon(){
				this.$request.get(this.$api.abandonDraft, {
					storeId:uni.getStorageSync('store_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.$refs.popup.close()
						setTimeout(()=>{
							uni.navigateTo({
								url:'/shop-inspection/sign',
							})
						},600)
					}
				})
			},
			// 继续
			handleContinue(){
				uni.navigateTo({
					url:'/shop-inspection/patrolReport?type=draft',
					success: () => {
						this.$refs.popup.close()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-inspection-container{
		padding: 28rpx;
		padding-bottom:160rpx;
	}
	.grade-box{
		.grade-top{
			margin-bottom: 14rpx;
			.title{
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
			}
			.time{
				color: rgba(255, 255, 255, 0.5);
				font-size: 24rpx;
			}
		}
		.grade-item{
			flex: 1;
			background: #1D1C5C;
			padding: 20rpx;
			border-radius: 12rpx;
			.item-top{
				.name{
					color: #fff;
					font-size: 28rpx;
				}
				.look{
					color: rgba(255, 255, 255, 0.5);
					font-size: 22rpx;
				}
			}
			.score{
				color: #fff;
				font-size: 48rpx;
				padding: 6rpx 0;
			}
			.info{
				margin-top: 4rpx;
				letter-spacing: 2rpx;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.5);
				.up{
					color: #2BA471 ;
				}
				.down{
					color: #D54941;
				}
				.highlight{
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
	
	.warning-box{
		margin-top: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;
		.warn-top{
			.title{
				color: #fff;
				font-size: 28rpx;
				font-weight: bold;
				text{
					color: #D54941;
				}
			}
			.btn{
				padding: 0 20rpx;
				height: 50rpx;
				line-height:50rpx;
				border-radius: 8rpx;
				color: #fff;
				font-size: 24rpx;
				background: #26BCFD;
			}
		}
		.tips{
			margin-top: 20rpx;
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.5);
		}
		.table-item{
			margin-top: 20rpx;
			.table{
				font-size: 26rpx;
				color: #fff;
			}
			.warn-item{
				margin-top: 20rpx;
				&:nth-of-type(2){
					margin-top: 10rpx;
				}
				.object{
					font-size: 24rpx;
					color: #fff;
					.soon-expire{
						margin-left: 10rpx;
						color: #FFB726;
					}
					.has-expired{
						margin-left: 10rpx;
						color: #D54941;
					}
				}
				.use-time{
					margin-top: 8rpx;
					font-size: 22rpx;
					color:rgba(255, 255, 255, 0.5);
				}
			}
		}
	}
	
	.star-level-box{
		margin-top: 20rpx;
		gap:14rpx;
		.label{
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
		.star-num{
			color: #FF8E00;
			font-size: 28rpx;
			font-weight: bold;
			gap: 10rpx;
		}
	}
	
	.patrolReport-box {
		margin-top: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;
	
		.report-top {
			.title {
				color: #fff;
				font-size: 26rpx;
				font-weight: bold;
			}
	
			.look {
				color: rgba(255, 255, 255, 0.5);
				font-size: 22rpx;
			}
		}
	
		.inspection-info {
			margin-top: 10rpx;
			color: rgba(255, 255, 255, 0.5);
			font-size: 22rpx;
		}
	
		.grade {
			margin-top: 12rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}
	
		.inspection-summarize {
			margin-top: 12rpx;
	
			.title {
				color: rgba(255, 255, 255, 0.5);
				font-size: 24rpx;
			}
	
			.desc {
				margin-top: 10rpx;
				color: rgba(255, 255, 255, 0.8);
				font-size: 22rpx;
			}
		}
	
	}
	
	.classify-box{
		margin-top: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;
		.disqualification{
			color: #D54941;
		}
		.qualification{
			color: #2BA471;
		}
		.orange{
			color: #FF8E00;
		}
		.other{
			color: #FFB726;
		}
		
		.classify-title{
			font-weight: bold;
			font-size: 26rpx;
			color: #FFFFFF;	
		}
		
		.inspect-box{
			margin-top: 10rpx;
			.inspect-item{
				padding: 7rpx 0;
				&:last-child{
					border-bottom: none;
				}
				.content{
					font-size: 22rpx;
					color: rgba(255,255,255,0.8);
					line-height: 34rpx;
				}
				.status{
					margin-top: 7rpx;
					font-size: 22rpx;
					color: rgba(255,255,255,0.5);
				}
			}
		}	
	}
	
	.bottom-box{
		width: 100%;
		padding-top: 14rpx;
		padding-bottom: 62rpx;
		background:#040336;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;
		z-index:11;
		.define-btn{
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			width: 686rpx;
			height: 96rpx;
			line-height: 96rpx;
			background: linear-gradient( 90deg, #598FFF 0%, #2662DE 100%);
			border-radius: 48rpx;
			text-align: center;
		}
	}
	
	.popup-content{
		background: #1A195F;
		padding: 32rpx;
		border-radius: 16rpx;
		.close-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			letter-spacing: 2rpx;
			color: #fff;
		}
		.content{
			margin-top: 60rpx;
			font-size: 26rpx;
			font-weight: 500;
			text-align: center;
			color: #fff;
		}
		
		.btn-box{
			margin-top: 60rpx;
			display: flex;
			justify-content: center;
			gap:40rpx;
			.restart-btn{
				flex: 1.5;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border: 1rpx solid #26BCFD;
				border-radius: 30rpx;
				box-sizing: border-box;
			}
			.continue-btn{
				flex: 1;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #26BCFD;
				border-radius: 30rpx;
			}
		}
	}
</style>